<template>
  <div>
    <zh-form  :span="8" ref="formInfo" :colmun="1"  :labelCol="labelColBase"
              :wrapperCol="wrapperColBase" :rules="rules" :model="formInfo"  labelAlign="right" >

      <zh-card title="基本信息" style="width:100%">
        <zh-row>
          <zh-input
              prop="h2007"
              type="select"
              label="区划"
              :options="dictData.xzqh"
              :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
              v-model="formInfo.h2007"
          ></zh-input>
          <zh-input
              prop="h2002"
              type="text"
              label="名称"
              v-model="formInfo.h2002"
          ></zh-input>
          <zh-input
              prop="h2003"
              type="select"
              label="年代"
              :options="dictData.b0106"
              :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
              v-model="formInfo.h2003"
          ></zh-input>
          <zh-input
              prop="h2004"
              type="text"
              label="尺寸"
              v-model="formInfo.h2004"
          ></zh-input>
          <zh-input
              prop="h2005"
              type="text"
              label="出土位置"
              v-model="formInfo.h2005"
          ></zh-input>
          <zh-input
              prop="h2009"
              type="text"
              label="序列号"
              v-model="formInfo.h2009"
          ></zh-input>
        </zh-row>
      </zh-card>
    </zh-form>
    <a-row >
      <a-col >
        <a-form-model-item label="简介：">
          <a-textarea
              v-model="formInfo.h2006"
              :rows="3"
          />
        </a-form-model-item>
      </a-col>
    </a-row>

    <div class="operate">
      <div style="width: 10%;">多媒体</div>
      <div style="width: 90%;display: block">
        <div style="text-align: right;width: 100%" v-if="editFlag === false">
          <ep-button
              icon="add.svg"
              size="small"
              type="primary"
              @click="addMediaInfo"
          >添加
          </ep-button>
        </div>
        <div>
          <ul class="media-wrap">
            <li v-for="(item, index) in mediaInfoList" :key="index">
              <div class="item special">
                <div class="desc">序号</div>
                <p>{{ item.b0207 }}</p>
              </div>
              <div class="item">
                <div class="desc">媒体类型</div>
                <p>{{ item.b0202Name }}</p>
              </div>
              <div class="item">
                <div class="desc">缩略图</div>
                <template v-if="item.b0202Name === '图片'">
                  <img
                      v-if="item.b0205"
                      :src="fileShowUrl + item.b0205"
                      @click="checkImg(item.b0205)"
                      alt=""
                  />
                </template>
                <template v-else>
                  <img
                      v-if="item.b0206"
                      :src="fileShowUrl + item.b0206"
                      @click="checkImg(item.b0206)"
                      alt=""
                  />
                </template>
              </div>
              <div class="item">
                <div class="desc">名称</div>
                <p>{{ item.b0203 }}</p>
              </div>
              <div class="item" v-if="item.b0202Name !== '全景' && item.b0202Name !== '三维模型'">
                <div class="desc">文件名称</div>
                <p>{{ item.b0205Name }}</p>
              </div>
              <div class="item" v-if="item.b0202Name === '全景' || item.b0202Name === '三维模型'">
                <div class="desc">链接</div>
                <p style="cursor:pointer;color: #00C6FF" @click="clickForLink(item.b0205)">{{ item.b0205 }}</p>
              </div>
              <div class="item">
                <div class="desc"></div>
                <div class="btn-wrap">
                  <ep-button
                      size="small"
                      icon="edit.svg"
                      :disabled="editFlag"
                      @click="editMediaInfo(item,index)"
                  >编辑
                  </ep-button>

                  <ep-button
                      size="small"
                      type="danger"
                      icon="del.svg"
                      :disabled="editFlag"
                      @click="deleteMediaInfo(index)"
                      style="margin-left: 15px"
                  >删除
                  </ep-button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <a-modal
          :title="modalTitle"
          centered
          style="top: 20px"
          width="50%"
          destroyOnClose
          v-model="visible"
          cancelText="关闭"
          okText="保存"
          @ok="handleForm"
      >
        <mediaInfoItem ref="mediaInfoItem" :editFlag="editFlag" />
      </a-modal>
    </div>
  </div>
</template>

<script>
import modal from 'ant-design-vue/es/modal'
import {fileShowUrl, getBatchDict} from "@/services/system/api"
import {culturalFileAdd,getCulturalFileDetails} from '@/services/system/whdngxlApi'
import {TreeSelect} from "ant-design-vue";
import mediaInfoItem from "@/pages/system/form/mediaInfoItem";
import moment from "moment";
import {mapGetters} from "vuex";

const SHOW_PARENT = TreeSelect.SHOW_PARENT;
export default {
  name: "CulturalFileAddForm",
  components:{
    mediaInfoItem,
  },
  computed: {
    ...mapGetters(['size']),
  },
  props:{
    listQuery:{
      type:Function,
      default:null
    },
  },
  data() {
    return {
      toolbarConfig: {
        slots: {
          tools: 'toolbar_tools'
        }
      },
      formInfo:{
        h2001:'',
        h2002:'',
        h2003:'',
        h2004:'',
        h2005:'',
        h2006:'',
        h2007:'',
        h2009:undefined,
      },
      rules:{},
      dictData: {
        xzqh:[],
        b0106:[],
      },
      taskAreaTree:[],
      SHOW_PARENT,
      labelCol: { span: 2 },
      wrapperCol: { span: 22 },
      labelColBase: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperColBase: {
        xs: {span: 24},
        sm: {span: 16},
      },
      visible: false,
      modalTitle: "",
      fileShowUrl: fileShowUrl, //预览接口地址
      editIndex:'',
      mediaInfoList: [],
      mediaInfoListForDel: [],
      editFlag: false,
    }
  },

  created() {
    const params2 = {};
    params2.dictFields = "xzqh,b0106";
    this.$http.post(getBatchDict, params2).then((res) => {
      this.dictData = res.result;
    });
  },
  methods: {
    clickForLink(url){
      window.open(url,'_blank')
    },
    initData(data){
      //编辑
      if(data.h2001){
        const params = {}
        params.h2001 = data.h2001
        setTimeout(() => {
          this.$http.post(getCulturalFileDetails, params).then((res) => {
              this.formInfo = res.result
              this.mediaInfoList = res.result.mediaInfoList? res.result.mediaInfoList:[]
          }).catch((error) => {
          }).finally(() =>{
          })
        }, 50)
      }
    },
    //确定
    handleForm() {
      var mediaInfoItem = this.$refs.mediaInfoItem.mediaInfoItem;
      if (this.modalTitle === "新增") {
        mediaInfoItem.flag = "save";
        this.mediaInfoList.push(mediaInfoItem);
      } else {
        this.mediaInfoList.splice(this.editIndex, 1, mediaInfoItem);
      }
      this.$nextTick(() => {
        this.visible = false;
      });
    },
    getListSize(list) {
      this.b0207Num = 0;
      list.forEach((item) => {
        if (item.b0207 > this.b0207Num) {
          this.b0207Num = item.b0207;
        }
      });
      if (this.b0207Num < list.length) {
        this.b0207Num = list.length;
      }
      this.b0207Num++;
    },
    //新增
    addMediaInfo() {
      this.modalTitle = "新增";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.mediaInfoItem.editFlag = this.editFlag;
        this.getListSize(this.mediaInfoList);
        this.$refs.mediaInfoItem.b0207Num = this.b0207Num;
        this.$refs.mediaInfoItem.init(null);
      });
    },
    //编辑
    editMediaInfo(row,index) {
      this.modalTitle = "编辑";
      this.editIndex = index;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.mediaInfoItem.editFlag = this.editFlag;
        if (row.b0201) {
          row.flag = "edit";
        }
        this.$refs.mediaInfoItem.init(row);
      });
    },
    deleteMediaInfo(index) {
      modal.confirm({
        title: "确认删除吗？",
        onOk: () => {
          if ( this.mediaInfoList[index].b0201) {
            const item = JSON.parse(JSON.stringify(this.mediaInfoList[index]));
            item.flag = "delete";
            this.mediaInfoListForDel.push(item);
          }
          this.mediaInfoList.splice(index, 1);
        },
        onCancel: () => {},
      });
    },
    checkImg(showId) {
      let url = this.fileShowUrl + showId;
      window.open(url, "_blank");
    },
    confirm(){
      if(this.formInfo.h2007 == '' || this.formInfo.h2007 == null ){
        modal.warn({ title: "提示", content: "区划不能为空" });
        return;
      }
      if(this.formInfo.h2002 == '' || this.formInfo.h2002 == null ){
        modal.warn({ title: "提示", content: "工程名称不能为空" });
        return;
      }
      this.$loading.show('正在处理数据,请等待...')
      const params = Object.assign(this.formInfo)
      params.mediaInfoList = this.mediaInfoList
      params.mediaInfoListForDel = this.mediaInfoListForDel
      setTimeout(() => {
        this.$http.post(culturalFileAdd, params).then((res) => {
          this.$message.info('保存成功')
            this.$emit("handleCancel")
            if(this.listQuery) {
              this.listQuery()
            }
        }).catch((error) => {
          console.log(JSON.stringify(error))
        }).finally(() =>{
          this.$loading.hide()
        })
      }, 50)
    },
  }
}
</script>

<style scoped lang="less">
.list-item {
  display: flex;

  .list-item-index {
    width: 36px;
    font-size: 18px;
  }
}

.sub-form {
  margin-top: 15px;
}
.media-wrap {
  margin-top: 15px;
  li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
    .item {
      flex: 0 0 auto;
      width: 18%;
      .desc {
        width: 100%;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        width: 100%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .btn-wrap {
        text-align: center;
      }
      img {
        width: auto;
        height: 90px;
        max-width: 98%;
        vertical-align: middle;
        cursor: pointer;
      }
      &.special {
        width: 5%;
      }
    }
  }
}
</style>
